<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Pilot Light Object - 5 States</title>
  <script type="text/javascript" src="../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../highlightCode.js"></script>
  <link href='../../highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Pilot Light Object - 5 States</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Create an SVG monitoring pilot light object that has five(5) states: ON, ALARM, INTERMITTENT, DEFECTIVE, AND NORMAL OFF.
Each state has a different color. Each fill color consists of a radialGradient.
</div>
<table><tr>
<td>
<div style="padding:10px;width:400px;text-align:justify">

<b>Scenerio:</b><br />


<br>Each change of state color also includes a confirming graphic feedback to compensate for color blindness.<br>
<table border=1>
<tr style=font-weight:bold ><td>State</td><td>Color</td><td>Feedback</td></tr>
<tr><td>1. ON</td><td>green</td><td>solid</td></tr>
<tr><td>2. ALARM</td><td>red</td><td>flash w/ diagonal line</td></tr>
<tr><td>3. INTERMITTENT</td><td>violet</td><td>flashing</td></tr>
<tr><td>4. DEFECTIVE</td><td>aqua</td><td>inner red 'not' symbol</td></tr>
<tr><td>5. NORMAL OFF</td><td>grey</td><td>"X" lines</td></tr>

</table> <p></p>
Example of how the various states could be applied: The central monitoring panel PID loop graphic
includes two(2) pilot lights; one associated  with the field controller, and the other monitoring the modulating actuator's controlled device (e.g. valve, damper, etc.) position locally.
<br>
<table border=1 style=text-align:left;>
<tr style=font-weight:bold ><td>State</td><td>PID Controller</td><td>Actuator</td></tr>
<tr><td>ON</td><td>Local circuit active</td><td>Actuator's device fully open</td></tr>
<tr><td>ALARM</td><td>Local circuit failure</td><td>Local circuit failure</td></tr>
<tr><td>INTERMITTENT</td><td>Not applicable</td><td>Actuator's device modulating</td></tr>
<tr><td>DEFECTIVE</td><td>Under repair</td><td>Under repair</td></tr>
<tr><td>NORMAL OFF</td><td>Local circuit off</td><td>Actuator's device fully closed</td></tr>

</table>

</div>
</td>
<td>
<div id="svgDiv" style='width:400px;height:400px;'>
<svg id=mySVG width=400 height=400>
<defs>
<radialGradient id="blueGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="greenGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(0,191,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="greyGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="redGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="violetGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(219,0,219);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="aquaGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:aqua;stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
</defs>
<defs>
<g id=pilotLightG><circle id=pilotLight cx="0" cy="0" r="1"  fill="url(#greenGradient)" /><line style="visibility:hidden" name=lineOff x1=-.5 y1=-.5 x2=.5 y2=.5 stroke='black' stroke-width=.1 /><line  style="visibility:hidden"  name=lineDisabled x1=.5 y1=-.5 x2=-.5 y2=.5 stroke='black' stroke-width=.1 /><circle  style="visibility:hidden"  name=circleDefective cx=0 cy=0 r=.7 stroke='crimson' stroke-width=.2 fill="none" /><line style="visibility:hidden" name=lineDefective x1=-.5 y1=-.5 x2=.5 y2=.5 stroke='crimson' stroke-width=.08 /></g>
</defs>

<text x=100 y=110 text-anchor="middle" dy=35 font-size=12 stroke='none' fill=black >ON</text>
<text x=50 y=200 text-anchor="middle" dy=35 font-size=12 stroke='none' fill=black >ALARM</text>
<text x=150 y=200 text-anchor="middle" dy=35 font-size=12 stroke='none' fill=black >INTERMITTENT</text>
<text x=50 y=300 text-anchor="middle" dy=35 font-size=12 stroke='none' fill=black >DEFECTIVE</text>
<text x=150 y=300 text-anchor="middle" dy=35 font-size=12 stroke='none' fill=black >NORMAL OFF</text>
</svg>
</div>

</td>
</tr></table>
  <br />SVG Source:
  <div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
  Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:100%;text-align:left; /></div><p></p>
</center>
<script id=myScript>
//---configure pilot lights---
var config=[] //---[pilotLightId,transX,transY,scale,initialState(color)]---
config[0]=["pilotLight1",100,110,20,"green"]
config[1]=["pilotLight2",50,200,20,"red"]
config[2]=["pilotLight3",150,200,20,"violet"]
config[3]=["pilotLight4",50,300,20,"aqua"]
config[4]=["pilotLight5",150,300,20,"grey"]

//---onload---
function createPilotLights()
{
    for(var k=0;k<config.length;k++)
    {
        var myPilotLightG=pilotLightG.cloneNode(true)
        myPilotLightG.setAttribute("id","myPilotLightG"+k)
        var id=config[k][0]
        var transX=config[k][1]
        var transY=config[k][2]
        var scale=config[k][3]
        var color=config[k][4]
        myPilotLightG.firstChild.setAttribute("id",id)
        var gradient=color+"Gradient"
        myPilotLightG.firstChild.setAttribute("fill","url(#"+gradient+")")
        myPilotLightG.setAttribute("transform","translate("+transX+","+transY+")scale("+scale+")")

        var off=myPilotLightG.childNodes.item(1)
        var disabled=myPilotLightG.childNodes.item(2)
        var defectiveCircle=myPilotLightG.childNodes.item(3)
        var defectiveLine=myPilotLightG.childNodes.item(4)

        if(color=="red")
            off.setAttribute("style","visibility:visible")

        if(color=="grey")
        {
            off.setAttribute("style","visibility:visible")
            disabled.setAttribute("style","visibility:visible")
        }


        if(color=="aqua")
        {
            defectiveCircle.setAttribute("style","visibility:visible")
            defectiveLine.setAttribute("style","visibility:visible")

         }
        mySVG.appendChild(myPilotLightG)
    }
}



var intermittentInterval=setInterval("intermittent()",1000)

function intermittent()
{
    for(var k=0;k<config.length;k++)
    {
        var myPilotLightG=document.getElementById("myPilotLightG"+k)
        var off=myPilotLightG.childNodes.item(1)
        var disabled=myPilotLightG.childNodes.item(2)
        var defective=myPilotLightG.childNodes.item(3)
        var id=config[k][0]
        var myPilotLight=document.getElementById(id)
        var color=config[k][4]
        if(color=="violet")
        {

            off.setAttribute("style","visibility:hidden")
            disabled.setAttribute("style","visibility:hidden")
            defective.setAttribute("style","visibility:hidden")

            if(myPilotLight.getAttribute("fill-opacity")=="1")
            myPilotLight.setAttribute("fill-opacity",.6)
            else
            myPilotLight.setAttribute("fill-opacity",1)
        }
        if(color=="red")
        {
            if(myPilotLight.getAttribute("fill-opacity")=="1")
            myPilotLight.setAttribute("fill-opacity",.6)
            else
            myPilotLight.setAttribute("fill-opacity",1)
        }



    }

}


</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    createPilotLights()
   	showSourceSVG()
	showSourceJS()

}


</script>
<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-88028738-1', 'auto');
  ga('send', 'pageview');


</script>

</body>

</html>